<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<script>
    window.onload = function () {
        var btn = document.getElementById("btn");
        var box1 = document.getElementById("box1");
        btn.onclick = function () {
            //通过style修改的是内联样式
            box1.style.height = "400px";
            box1.style.backgroundColor = "yellow";
        }

        var btn2 = document.getElementById("btn2");
        btn2.onclick = function () {
            //获取被内联样式修改过的高，无法读取样式表中的样式
            alert(box1.style.height);
        }


        //获取元素的样式
        var btn3 = document.getElementById("btn3");
        function getStyle(obj,name) {
            //通过这两个方式读取到的都是只读的不能修改
            //正常浏览器的方式
            //return getComputedStyle(obj,null)[name];
            //ie8以下浏览器
            //return obj.currentStyle[name];
            if(window.getComputedStyle){
                return getComputedStyle(obj,null)[name];
            }else{
                return obj.currentStyle[name];
            }
        };
        btn3.onclick = function () {
            alert(getStyle(box1,"width"));
        }
        
        var btn4 = document.getElementById("btn4");
        btn4.onclick = function () {
            //clientWidth,clientHeight返回可见宽度和高度
           var s = box1.clientHeight;
           alert(s)
        };

        //未完结******************************************************
    };
</script>
<body>
    <button id="btn">点我</button>
    <button id="btn2">点我</button>
    <button id="btn3">点我</button>
    <button id="btn4">点我</button>
    <div id="box1" > 

    </div>
</body>
</html>